<script setup>
import $bus from "../../utils/bus";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { getPageTradeUnitsApi,refreshTradeUnitApi } from "@/api/tradeGoods";

// ---------------------------------------------------------------------获取查询刷新---------------------------------------------------------------------
const dataList = ref([]);
const queryPageParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0)
const getData = async () => {
  const res = await getPageTradeUnitsApi(queryPageParams.value);
  dataList.value = res.data.list;
  total.value = res.data.total
};
const getPage = () => {
  getData();
};
const clear = () => {
  queryPageParams.value.pageNum = 1;
  queryPageParams.value.pageSize = 10;
  getData();
};
const refresh = async () => {
  const res = await refreshTradeUnitApi();
  ElMessage({
    message: res.data,
    type: "success",
  });
};
const handlePageChange = () => {
  getData()
}
//---------------------------------------------------------------------获取标题事件---------------------------------------------------------------------
const titleData = ref({
  titleFir: "贸易数据",
  titleSec: "商品信息",
});
onMounted(() => {
  $bus.emit("title-info", titleData.value);
  getData();
});
</script>
<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getPage()">查询</el-button>
        <el-button icon="RefreshRight" type="info" @click="clear()">重置</el-button>
        <el-button icon="Edit" type="danger" @click="refresh()">刷新</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <el-table :data="dataList" stripe fit
        scrollbar-tabindex>
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column width="55" type="index" label="序号"></el-table-column>
      <el-table-column label="商品单位名称" prop="unitName"></el-table-column>
    </el-table>

    <el-pagination v-model:current-page="queryPageParams.pageNum" v-model:page-size="queryPageParams.pageSize"
      :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="+total"
      @change="handlePageChange" />
  </el-card>
</template>
<style scoped>

</style>
